<template>
	<view class="content">
		<view class="status-safe-box" :style="{ height: statusHeight + 'px' }"></view>
		<view class="bound-safe-box" :style="{ height: boundingHeight + 'px', top: statusHeight + 'px' }"></view>

		<view :style="{ paddingTop: statusHeight + boundingHeight + 'px' }">
			<view class="item" v-for="item in 100" :key="item.id">
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			boundingRect: {},
			boundingTop: 0,
		}
	},
	computed: {
		// 状态栏的高度
		statusHeight() {
			return this.statusBarHeight
		},
		// 胶囊按钮的高度
		boundingHeight() {
			return (this.boundingTop - this.statusBarHeight) * 2 + this.boundingRect.height
		},
	},
	onLoad() {
		this.getHegiht()
	},
	methods: {
		getHegiht() {
			let sysInfo = uni.getSystemInfoSync()
			console.log(sysInfo)
			this.statusBarHeight = sysInfo.statusBarHeight

			// 注意这个只有微信有，h5会报错
			// #ifdef MP-WEIXIN
			let boundingRect = uni.getMenuButtonBoundingClientRect()
			console.log(boundingRect)
			this.boundingRect = boundingRect
			this.boundingTop = boundingRect.top
			// #endif
		},
	},
}
</script>

<style lang="scss" scoped>
.content {
	position: relative;
	.status-safe-box {
		position: fixed;
		width: 100%;
		background-color: greenyellow;
	}
	.bound-safe-box {
		position: fixed;
		width: 100%;
		background-color: deeppink;
	}
}

.item {
	height: 80rpx;
	font-size: 36rpx;
	text-align: center;
	&:nth-child(even) {
		background-color: skyblue;
	}
}
</style>
